<template>
  <div class="page">
    <div class="main">
          <NavBar title="详情" :isBack="isBack" />
      <div class="header">
        <img src="../assets/img/g1.png" alt="" />
        <div class="name">海底两万里</div>
      </div>
      <div class="title">详情</div>
      <div class="box">
        简介：
        这是一套由乐乐趣出品的立体翻翻书，属于揭秘系列，以简洁生动的文字，帮助孩子科普相关知识。本系列共有31册。适和3-10岁的孩子，大开本设计，为孩子营造开阔的阅读视野。每本书均有2个大折页+70多个翻翻页，由国外优秀插画家绘制，画风各不相同，带来不一样的阅读体验。通过阅读这套书，孩子不仅可以学习到科普知识，还可以在翻阅翻页时，实现手脑互动，增添阅读的兴趣。
      </div>
      <div class="img-list">
        <img src="../assets/img/g1.png" alt="">
      </div>
      <div class="btn-empty"></div>
      <div class="btn">
        <div class="btn-left">加入书架</div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import NavBar from "../components/NavBar.vue";
import { useRouter } from "vue-router";
const router = useRouter();
const isBack = ref(true);
onMounted(() => {
  console.log("mounted");
  console.log(router);
});
</script>
<style scoped lang="less">
.page {
  width: 100%;
  min-height: 100vh;
  background: #f8f8f8;
}
.header {
  text-align: center;
  padding: 20px;
  background: #fff;
}
.header img {
  margin: 0 auto;
}
.title {
  margin: 20px;
  margin-left: 0px;
  position: relative;
  padding-left: 30px;
}
.title::before {
  content: "";
  position: absolute;
  width: 3px;
  height: 15px;
  background-color: #ffc92e;
  border-radius: 1px;
  left: 15px;
  top: 50%;
  margin-top: -7px;
}
.box {
  width: calc(92% - 40px);
  height: 246px;
  background-color: #fff;
  padding: 15px;
  border-radius: 6px;
  margin: 20px;
}

.btn-empty{
    width: 100%;
    height: 50px;
}
.img-list img{
    width: 100%;
}
.btn{
    width: 100%;
    height: 50px;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    .btn-left{
        width: 85%;
        height: 40px;
        background-color: #1e80ff;
        border-radius: 5000px;
        text-align: center;
        line-height: 40px;
        color: #fff;
    }
}
</style>
